<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/login.css">
</head>

<body>
    <!-- 头部 -->
    <div class="header bancen">
        <a href=""></a>
        <img src="../img/yinsi.png" alt="">
    </div>
    <div class="banner-bg">
        <div class="login-box bancen">
            <div class="loginDiv">
                <div>
                    <p>苏宁易购不会以任何形式进行收费</p>
                </div>
                <p class="login-Font">账号登录</p>
                <div name="result" class="result"></div>
                <label>
                    <span class="span1"></span>
                    <input type="text" placeholder="用户名/手机/邮箱" name="name" id="userName">
                </label>
                <label>
                    <span class="span2"></span>
                    <input type="password" placeholder="密码" name="pwd" id="password">
                </label>
                <div class="safa">
                    <a href="./reg.html">注册账号</a>
                    <a href="">忘记密码</a>
                </div>
                <div class="login-button">
                    <button name="login" type="submit">登 录</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <div class="footer">
        <img src="../img/footer.png" alt="">
    </div>

    <script src="../tools/jquery.min.js"></script>
    <script src="../js/ajax.js"></script>
    <script src="../js/cookie.js"></script>

    <script>
        // 给 登录按钮 添加点击事件
        $('[name="login"]').click(function () {
            // 触发执行 async 封装的函数程序
            setLogin();

            // 在 jQuery的事件中 定义 return false 
            // 可以 阻止默认事件的执行 也可以 阻止事件的传播
            return false;
        })

        // 使用 async 封装函数
        async function setLogin() {
            // 获取 账号 密码 数据
            let name = $('[name="name"]').val();
            let pwd = $('[name="pwd"]').val();

            // 应该有 验证 我懒得写了

            // 触发 await 执行 封装的promise,ajax请求
            const res = await myPromiseAjax('../server/goods_login.php', 'post', { userName: name, userPwd: pwd }, 'json');
            console.log(res);

            // 根据结果动态生成页面
            if (res.result === 1) {
                // 登录成功 设定 cookie 
                // 键名 是 login 键值 1
                mySetCookie('login', 1, '/', 7 * 24 * 60 * 60);

                // 登录成功 跳转效果
                $('[name="result"]').html('<span>登录成功,5秒返回上一个页面,<a href="./index.html" style="color: red">点击跳转首页面</a></span>');

                let num = 5;
                let time = setInterval(function () {
                    num--;
                    $('[name="result"]').html(`<span>登录成功,${num}秒返回上一个页面,<a href="./index.html">点击跳转首页面</a></span>`);
                    if (num === 1) {
                        clearInterval(time);
                        // 登录成功后 返回的是 上一个 页面 
                        // 如果是多个页面跳转过来的 
                        // 也可以使用 window.history.go(-数值) 实现效果
                        window.history.back();
                    }
                }, 1000)

            } else if (res.result === 0) {
                // 登录失败 写入提示信息
                $('[name="result"]').html('<span style="color:red">账号/密码输出错误</span>');
            }
        }
    </script>
</body>

</html>